<template>
  <div class="manage">
    <ht-header>栏目管理</ht-header>
    <div class="content">
      <div class="active">
        <h3>点击删除以下频道(必须保留4项以上)</h3>
        <div class="list">
          <div
            class="item"
            v-for="item in activeList"
            :key="item.id"
            @click="delTab(item.id, item.name)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="deactive">
        <h3>点击添加以下频道</h3>
        <div class="list">
          <div
            class="item"
            v-for="item in deactiveList"
            :key="item.id"
            @click="addTab(item.id, item.name)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*
  思路
    1. 发送ajax请求，获取到所有的栏目，存放activeList
    2. 渲染这些栏目
    3. 点击激活的栏目， 删除该栏目，并且添加未激活的数组
    4. 点击未激活的栏目，删除该栏目，添加到激活的栏目中
    5. 监听数据的变化，保存到localStorage中
*/
export default {
  methods: {
    addTab(id, name) {
      console.log(id)
      this.deactiveList = this.deactiveList.filter((item) => {
        return item.id !== id
      })
      const obj = {
        id: id,
        name: name,
        is_top: 0,
      }
      this.activeList.push(obj)
    },
    delTab(id, name) {
      if (this.activeList.length <= 4) return
      const index = this.activeList.findIndex((item) => {
        return item.id === id
      })
      this.deactiveList.push(this.activeList[index])
      this.activeList.splice(index, 1)
      // console.log(index)
      // console.log(id)
      // this.activeList = this.activeList.filter((item) => {
      //   return item.id !== id
      // })
      // const obj = {
      //   id: id,
      //   name: name,
      //   is_top: 0,
      // }
      // this.deactiveList.push(obj)
    },
  },
  data() {
    return {
      // 存放激活的栏目-----可以删除
      activeList: [],
      // 存放未激活的栏目----可以添加
      deactiveList: [],
    }
  },
  async created() {
    const activeList = JSON.parse(localStorage.getItem('activeList'))
    const deactiveList = JSON.parse(localStorage.getItem('deactiveList'))
    if (activeList) {
      this.activeList = activeList
      this.deactiveList = deactiveList
      // 有的话 先赋值在退出  这样就不用发请求了
      return
    }
    const res = await this.$axios.get('/category')
    // console.log(res.data)
    const { statusCode, data } = res.data
    if (statusCode === 200) {
      this.activeList = data
    }
  },
  watch: {
    // 随便监听一个就行
    activeList: {
      deep: true,
      handler(newValue) {
        // 发现 2和3  打印的结果一样--activeList
        // console.log(newValue, '2')
        // console.log(this.activeList, '3')
        // console.log(this.deactiveList, '4')
        // localStorage.setItem('activeList', JSON.stringify(this.activeList))
        localStorage.setItem('activeList', JSON.stringify(this.activeList))
        localStorage.setItem('deactiveList', JSON.stringify(this.deactiveList))
        // console.log(11)
      },
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  padding: 10px;
  .active,
  .deactive {
    h3 {
      font-size: 14px;
      font-weight: 400;
      margin: 10px 0;
    }
    .list {
      overflow: hidden;
      .item {
        width: 60px;
        height: 30px;
        border: 1px solid #ccc;
        background-color: #eee;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        float: left;
        margin: 5px;
      }
    }
  }
}
</style>
